<template>
    <div>


        <el-table border :data="tableData" style="width: 100%" size="small">
            <!-- 姓名列 -->
            <el-table-column prop="name" label="姓名" width="100" align="center"></el-table-column>

            <!-- 请假次数列 -->
            <el-table-column prop="num" label="请假次数" width="100" align="center">
                <template slot-scope="scope">
                    <div class="red bold">{{ scope.row.num }}</div>
                </template>
            </el-table-column>

            <!-- 考勤状态列 -->
            <el-table-column v-for="day in allDays" :key="day" :label="day" align="center" width="50">
                <template slot-scope="scope">
                    <i v-if="scope.row.stars[day]" class="el-icon-star-on blue size-20 bold"
                        @click="toggleStar(day, scope.row)"></i>
                    <i v-else class="el-icon-star-off gray size-20 bold" @click="toggleStar(day, scope.row)"></i>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script>
import { mapState } from "vuex"; // 导入 Vuex 的辅助函数

export default {
    data() {
        return {
            // currentDate: new Date(),
            tableData: [
                {
                    name: "王小虎",
                    num: 0,
                    stars: {
                        // ... 继续添加日期的初始状态
                    },
                },
                {
                    name: "王虎",
                    num: 0,
                    stars: {
                        // ... 继续添加日期的初始状态
                    },
                },
                // ... 添加其他员工的数据
            ],
            allDays: [], // 保存所有的日期
        };
    },
    mounted() {
        this.init();
    },
    methods: {
        init() {
            // 获取所有日期
            const currentDate = new Date();
            const year = currentDate.getFullYear();
            const month = currentDate.getMonth() + 1;
            console.log(month);
            const daysInMonth = new Date(year, month, 0).getDate();

            // 生成日期数组
            this.allDays = Array.from({ length: daysInMonth }, (value, index) => index + 1);
        },
        getStarColor(colorIdx) {
            return this.starColors[colorIdx];
        },

        toggleStar(day, row) {
            row.stars[day] = !row.stars[day];
            row.num += row.stars[day] ? 1 : -1;

        }



    },
};
</script>

<style lang="scss" scoped>
.red {
    color: red;
}

.bold {
    font-weight: bold;
}

.blue {
    color: blue;
}

.size-20 {
    font-size: 20px;
}

.gray {
    color: gray;
}

.skybluedark {
    color: #009688;
}
</style>